<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的在线简历</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            border-bottom: 1px solid #eee;
            padding-bottom: 20px;
        }
        .profile-img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
        }
        .contact-info p {
            margin: 5px 0;
        }
        .section {
            margin-bottom: 30px;
        }
        .section h2 {
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
        }
        .content {
            margin-left: 20px;
        }
        ul {
            list-style-type: square;
            padding-left: 20px;
        }
        footer {
            text-align: center;
            margin-top: 50px;
            color: #666;
        }
        .url-input-container {
            margin: 20px 0;
            padding: 15px;
            background: #f5f5f5;
            border-radius: 5px;
        }
        #resumeUrl {
            width: 70%;
            padding: 8px;
            margin-right: 10px;
        }
        #loadResumeBtn {
            padding: 8px 15px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #loadResumeBtn:hover {
            background: #45a049;
        }
        .error-message {
            color: red;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="url-input-container">
        <input type="url" id="resumeUrl" placeholder="输入简历URL (例如: https://example.com/resume.html)">
        <button id="loadResumeBtn">加载简历信息</button>
        <div id="errorMessage" class="error-message"></div>
    </div>

    <header>
        <div class="profile">
            <img src="profile.jpg" alt="个人照片" class="profile-img">
            <h1 id="name">何传斌</h1>
            <p id="jobTarget">求职意向：Java开发工程师</p>
        </div>
        <div class="contact-info">
            <p id="phone">电话: 18289727890</p>
            <p id="email">邮箱: 2981931392@qq.ccom</p>
            <p id="wechat">微信：18289727890</p>
        </div>
    </header>

    <section class="section">
        <h2>教育背景</h2>
        <div class="content">
            <p><strong id="school">海南经贸职业技术学院</strong> - <span id="major">软件技术专业</span></p>
            <p id="eduPeriod">2023.09 - 2026.06</p>
            <p id="courses">主修课程: Java编程、数据库原理、Web开发、数据结构与算法</p>
        </div>
    </section>

    <section class="section">
        <h2>技能专长</h2>
        <div class="content">
            <ul id="skillsList">
                <li>熟练掌握Java、Python编程语言</li>
                <li>熟悉Spring Boot、MyBatis等开发框架</li>
                <li>熟悉MySQL、Oracle数据库</li>
                <li>熟悉HTML、CSS、JavaScript等前端技术</li>
                <li>熟悉Linux操作系统和Git版本控制工具</li>
            </ul>
        </div>
    </section>

    <section class="section">
        <h2>项目经验</h2>
        <div class="content" id="project1">
            <h3>在线图书管理系统</h3>
            <p class="projectTime">项目时间: 2023.03 - 2023.06</p>
            <p class="projectDesc">项目描述: 基于Spring Boot和MySQL开发的图书管理系统，支持图书的增删改查、借阅归还等功能。</p>
            <p class="projectRole">个人职责: 负责后端开发，设计数据库表结构，实现RESTful API接口。</p>
            <p class="projectTech">技术栈: Java, Spring Boot, MySQL, HTML, CSS, JavaScript</p>
        </div>
        <div class="content" id="project2">
            <h3>个人博客网站</h3>
            <p class="projectTime">项目时间: 2023.09 - 2023.12</p>
            <p class="projectDesc">项目描述: 使用Django框架开发的个人博客网站，支持文章发布、评论、用户注册登录等功能。</p>
            <p class="projectRole">个人职责: 负责前后端开发，部署到Linux服务器。</p>
            <p class="projectTech">技术栈: Python, Django, SQLite, HTML, CSS, JavaScript</p>
        </div>
    </section>

    <section class="section">
        <h2>获奖情况</h2>
        <div class="content">
            <ul id="awardsList">
                <li>无</li>
            </ul>
        </div>
    </section>

    <section class="section">
        <h2>自我评价</h2>
        <div class="content">
            <p id="selfEvaluation">热爱编程，具备扎实的Java开发基础，熟悉常见开发框架和工具。有较强的学习能力和团队合作精神，能够快速适应新技术和新环境。</p>
        </div>
    </section>

    <footer>
        <p>© 2025 <span id="footerName">何传斌</span>. 版权所有.</p>
    </footer>

    <script>
        document.getElementById('loadResumeBtn').addEventListener('click', async function() {
            const urlInput = document.getElementById('resumeUrl');
            const errorMessage = document.getElementById('errorMessage');
            const url = urlInput.value.trim();
            
            // 清除之前的错误信息
            errorMessage.textContent = '';
            
            if (!url) {
                errorMessage.textContent = '请输入有效的简历URL';
                return;
            }

            // 验证URL格式
            if (!/^https?:\/\/.+/i.test(url)) {
                errorMessage.textContent = 'URL必须以http://或https://开头';
                return;
            }

            try {
                // 使用更可靠的CORS代理方案
                const proxyUrl = `https://api.codetabs.com/v1/proxy/?quest=${encodeURIComponent(url)}`;
                
                // 显示加载状态
                const btn = document.getElementById('loadResumeBtn');
                btn.disabled = true;
                btn.textContent = '加载中...';
                
                const response = await fetch(proxyUrl);
                
                if (!response.ok) {
                    throw new Error(`服务器返回错误: ${response.status} ${response.statusText}`);
                }
                
                // 直接获取HTML文本内容
                const htmlContent = await response.text();
                
                // 检查是否获取到了有效HTML
                if (!htmlContent || htmlContent.includes('<html') === false) {
                    throw new Error('获取的内容不是有效的HTML文档');
                }
                
                // 解析HTML
                const parser = new DOMParser();
                const doc = parser.parseFromString(htmlContent, 'text/html');
                
                // 提取并更新基本信息
                const name = doc.querySelector('h1')?.textContent || '未提供姓名';
                document.getElementById('name').textContent = name;
                document.getElementById('footerName').textContent = name;
                
                // ... (保持原有的DOM更新逻辑，此处省略以节省篇幅)
                
                alert('简历信息已成功加载！');
            } catch (error) {
                console.error('加载简历失败:', error);
                errorMessage.textContent = `加载失败: ${error.message}`;
                
                // 如果是网络错误，提供更多帮助信息
                if (error.message.includes('Failed to fetch')) {
                    errorMessage.textContent += '\n请检查: 1. 网络连接 2. URL可访问性 3. 尝试其他简历URL';
                }
            } finally {
                // 恢复按钮状态
                const btn = document.getElementById('loadResumeBtn');
                btn.disabled = false;
                btn.textContent = '加载简历信息';
            }
        });

        // 改进的DOM更新函数（示例）
        function updateProfileInfo(doc) {
            try {
                const name = doc.querySelector('h1')?.textContent || '未提供姓名';
                document.getElementById('name').textContent = name;
                document.getElementById('footerName').textContent = name;
                
                // 从目标文档的.profile p中获取求职意向
                const jobTarget = doc.querySelector('.profile p')?.textContent || '未提供求职意向';
                document.getElementById('jobTarget').textContent = 
                    jobTarget.includes('求职意向：') ? jobTarget : `求职意向：${jobTarget}`;
                
                // 更新联系方式
                const contactDiv = doc.querySelector('.contact-info');
                if (contactDiv) {
                    const phone = contactDiv.querySelector('p:nth-child(1)')?.textContent || '电话: 未提供';
                    const email = contactDiv.querySelector('p:nth-child(2)')?.textContent || '邮箱: 未提供';
                    const wechat = contactDiv.querySelector('p:nth-child(3)')?.textContent || '微信: 未提供';
                    
                    document.getElementById('phone').textContent = phone.startsWith('电话') ? phone : `电话: ${phone}`;
                    document.getElementById('email').textContent = email.startsWith('邮箱') ? email : `邮箱: ${email}`;
                    document.getElementById('wechat').textContent = wechat.startsWith('微信') ? wechat : `微信: ${wechat}`;
                }
            } catch (error) {
                console.error('更新个人信息失败:', error);
                throw new Error('提取个人信息时出错');
            }
        }
    </script>
</body>
</html>